import { Component } from 'react';
import React from 'react';
import { Breadcrumb, Radio } from 'antd';
import  './index.less';
interface GroupHeaderProps {
  options: Array<Option>;
  onChage?: (value: any) => void;
  prefix?: string;
  defaultValue?: string;
  history?: any;
}

interface GroupHeaderState {
  currentSelect: string;
}

interface Option {
  [key: string]: any;
  hide?: boolean;
  title: string;
}

class GroupHeader extends Component<GroupHeaderProps, GroupHeaderState> {
  constructor(props: GroupHeaderProps) {
    super(props);
    this.state = {
      currentSelect: props.defaultValue ? props.defaultValue : props.options[0].title,
    };
  }
  render() {
    const {history} = this.props;
    const current = this.props.options.find((item) => {
      return history && item.path === history.location.pathname;
    });
    return (
      <div className={"header_container"}>
        <Breadcrumb>
          <Breadcrumb.Item href="">
            <span>{this.props.prefix}</span>
          </Breadcrumb.Item>
          <Breadcrumb.Item href="">
            <span>{current?.title}</span>
          </Breadcrumb.Item>
        </Breadcrumb>
        <div style={{ display: 'flex', flexDirection: 'row' }}>
          <Radio.Group
            defaultValue={this.props.defaultValue}
            buttonStyle="solid"
            size="middle"
            style={{}}
            onChange={(e) => {
              this.props.onChage?.(
                this.props.options.find((item) => item.title === e.target.value),
              );
              this.setState({
                currentSelect: e.target.value,
              });
            }}
          >
            {this.props.options.map((item, index) => {
              return item.hide ? null : (
                <Radio.Button
                  key={item.title.toString()}
                  className={"radio"}
                  value={item.title}
                >
                  {item.title}
                </Radio.Button>
              );
            })}
          </Radio.Group>
        </div>
      </div>
    );
  }
}

export default GroupHeader;
